<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/jquery-search-input.css">
    <style>
    </style>
</head>
<body>
<div class="search-talent"></div>
<div class="search-talent2"></div>

<script src="lib/jquery-3.5.1.js"></script>
<script src="js/jquery-search-input.js"></script>
<script>
    var data = [
        {
            "userId": "b8a0f364-17ce-45f4-9ec1-f4c1cfbca955",
            "talentId": "19f2079e-e3f7-49de-b085-0280e6047acc",
            "nickName": "labbor",
            "headImgUrl": "https://cos.sxkid.com/images/user/b8a0f364-17ce-45f4-9ec1-f4c1cfbca955/28b7a16d-f586-4cc0-8b9a-97ed32db8587_s.jpg"
        },
        {
            "userId": "fcbb302a-097d-4664-89e3-b659f8d62b92",
            "talentId": "0f149d0e-8e90-4a16-bad2-171c12dc715b",
            "nickName": "lion",
            "headImgUrl": "https://cos.sxkid.com/images/user/fcbb302a-097d-4664-89e3-b659f8d62b92/f3bb2838-5d2d-4ba7-a8c1-7f5b5b5006ce_s.jpg"
        }
    ];

    function getData(keyword) {
        return data.map(s => {
            return {
                id: s.talentId,
                text: s.nickName,
                imageUrl: s.headImgUrl
            }
        });
    }

    function getAsync(data) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(data);
            }, 1000)
        })
    }

    $('.search-talent').searchInput({
        name: 'talentType',
        placeholder: "请输入ww",
        selected:{
            id: 1,
            text: '你好'
        },
        loadData(keyword) {
            return getData(keyword);
        },
        onChanged(row) {
            console.log('onChanged', row)
        }
    });

    let count = 0;
    $('.search-talent2').searchInput({
        placeholder: "请输入222222",
        async loadData(keyword) {
            console.log('查询次数:' + count++)
            let data2 = [];
            for (let i = 0; i < 10; i++) {
                data2.push({
                    "id": i,
                    "text": (keyword || 'test') + '-' + i,
                    "imageUrl": "https://cos.sxkid.com/images/user/b8a0f364-17ce-45f4-9ec1-f4c1cfbca955/28b7a16d-f586-4cc0-8b9a-97ed32db8587_s.jpg"
                });
            }
            return getAsync(data2);

        }
    });
</script>
</body>
</html>